<template>
  <div class="box">
    <div style="font-size: 30px;">收货地址</div>
    <div class="list">
      <div v-for="(item, index) in list" :key="index" :class="{item : true, a : index == i}" @click="i = index">
        <div style="font-size: 20px;">{{item.receiveName}}</div>
        <p>{{item.receivePhone}}</p>
        <p>{{item.province}} {{item.area}} {{item.city}} {{item.street}}</p>
      </div>
      <div class="item" style="display: flex;justify-content: center;align-items: center;cursor:pointer;"
      @click="show({}, '新增确认')"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
        添加新的地址
      </div>
    </div>

    <el-dialog
        :title="msg"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
              :options="options"
              v-model="selectedOptions"
              @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <textarea style="width: 100%;"></textarea>
        </el-form-item>
      </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userAddress",
  data(){
    return {
      list : [],
      i : 0,
      dialogVisible : false,
      msg : '',
      form : {},
      options: [{
        value: 'hunan',
        label: '湖南省',
        children: [{
          value: 'changs',
          label: '长沙市',
          children: [
              {
              value: 'wuhuqu',
              label: '雨湖区'
            }]
          },
          {
            value: 'xt',
            label: '湘潭市',
            children: [{
              value: 'wuhuqu',
              label: '久经开发区'
          }]
        }]
      }]
    }
  },
  created() {
    this.getUserAddress()
  },
  methods : {
    getUserAddress(){
      this.axios
      .post("/api/address")
      .then((res) => {
        if (res.status == 200){
          this.list = res.data
          console.log(this.list)
        }
      })
    },
    show(form, msg){
      this.form = form
      this.msg = msg
      this.dialogVisible = true
    },
    selectedOptions(){

    },
    handleChange(){

    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
  .list{
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 280px;
      margin: 10px;
      box-sizing: border-box;
      border: 1px solid rgba(0,0,0,0.1);
      line-height: 30px;
      padding: 10px;
      .a{
        border: 1px solid #ff7800;
      }
    }
    .el-icon-plus avatar-uploader-icon{
      font-size: 50px;
    }
  }

}
</style>